<template>
	<view class="content">
		<!-- 员工、部门切换 -->
		<scroll-view scroll-x class="nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabArr" :key="index" @tap="tabSelect" :data-id="index">
				{{item}}
			</view>
		</scroll-view>
		<!-- 搜索框 -->
		<view class="cu-bar bg-gray search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="请输入关键字" confirm-type="search" @input="searchCustom"></input>
			</view>
		</view>
		<!-- 部门列表 -->
		<view class="cen-cont part-cont" v-show="TabCur == 0">
		   <ly-tree :tree-data="treeData" 
				:ready="ready"
				node-key="id"
				:showCheckbox="true"
				@node-expand="handleNodeExpand" 
				@node-click="handleNodeClick">
				</ly-tree>
		</view>
		<!-- 员工列表 -->
		<view class="cen-cont part-cont" v-show="TabCur == 1">
			员工列表
		</view>
		<!-- 底部 -->
		<view class="footer">
			<text class="text">已选择：</text>
			<view class="sub-btn">确定</view>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: { LyTree },
		data() {
			return {
				TabCur: 0, // 当前选中tab
				scrollLeft: 0,
				tabArr: ['部门','员工'],
				ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
				treeData: []
			}
		},
		onLoad() {	
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			// 模拟异步请求
			setTimeout(() => {
				this.treeData = [{
					id: 1,
					label: '一级 1',
					children: [{
						id: 11,
						label: '二级 1-1',
						children: [{
							id: 111,
							label: '三级 1-1-1'
						}]
					}]
				}, {
					id: 2,
					label: '一级 2',
					children: [{
						id: 21,
						label: '二级 2-1',
						children: [{
							id: 211,
							label: '三级 2-1-1'
						}]
					}, {
						id: 22,
						label: '二级 2-2',
						children: [{
							id: 221,
							label: '三级 2-2-1'
						}]
					}]
				}, {
					id: 3,
					label: '一级 3',
					children: [{
						id: 31,
						label: '二级 3-1',
						children: [{
							id: 311,
							label: '三级 3-1-1'
						}]
					}, {
						id: 32,
						label: '二级 3-2',
						children: [{
							id: 321,
							label: '三级 3-2-1'
						}]
					}]
				}];
	
				this.ready = true;
			}, 2000);
		},
		methods: {
			// tab切换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 顶部搜索
			searchCustom(e) {
				let key = e.detail.value
				console.log(key)
			},
			// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj));
			},
			handleNodeExpand(obj) {
				console.log('handleNodeExpand', JSON.stringify(obj));
			}
		}
	}
</script>


<style>
	page{
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.nav{
		background: #fff;
	}
	.bg-gray{
		background: #f7f7f7;
		.search-form{
			background: #fff;
		}
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		.cen-cont{
			height: calc(100% - 270upx);
			background: #fff;
			overflow-y: auto;
		}
		.footer{
			height: 90upx;
			padding: 0 24upx;
			margin-top: 20upx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text{
				font-size: 24upx;
				color: #3C81F8;
			}
			.sub-btn{
				padding: 16upx 26upx;
				background: #3C81F8;
				border-radius: 6upx;
				font-size: 24upx;
				color: #fff;
			}
		}
	}
</style>
